|
基于Vue的高德离线地图
离线地图优势环境需要下载地图离线资源包本项目功能具体代码
离线地图优势
高德地图接口，个人每天免费调用次数为500次，渲染速度受网络波动影响，又或许项目部署在局域网，无法访问外网。所以需要使用离线地图。
环境需要
npm install echarts --save
下载地图离线资源包
https://hxkj.vip/demo/echartsMap/ 将离线包导入到Vue项目中，资源包格式geoJson，Vue可能出现不识别情况，可将后缀名改成.Json格式。
本项目功能
本项目使用河南地图，省市下钻到县级
具体代码
import echarts from "echarts";
import Vue from 'vue'
import henan from './map/410000.Json'
import zhengzhou from './map/410000/410100.Json'
import kaifeng from './map/410000/410200.Json'
import luoyang from './map/410000/410300.Json'
import pingdingshan from './map/410000/410400.Json'
import anyang from './map/410000/410500.Json'
import hebi from './map/410000/410600.Json'
import xinxiang from './map/410000/410700.Json'
import jiaozuo from './map/410000/410800.Json'
import puyang from './map/410000/410900.Json'
import xuchang from './map/410000/411000.Json'
import luohe from './map/410000/411100.Json'
import sanmenxia from './map/410000/411200.Json'
import nanyang from './map/410000/411300.Json'
import shanqiu from './map/410000/411400.Json'
import xinyang from './map/410000/411500.Json'
import zhoukou from './map/410000/411600.Json'
import zhumadian from './map/410000/411700.Json'
import jiyuan from './map/410000/419001.Json'
import {getCityCode} from "../../api/LoadingRate";
export default {
name: "echart-map",
data() {
return {
itemMap : '',
jsonMap : {
'410000': henan,
'410100': zhengzhou,
'410200': kaifeng,
'410300': luoyang,
'410400': pingdingshan,
'410500': anyang,
'410600': hebi,
'410700': xinxiang,
'410800': jiaozuo,
'410900': puyang,
'411000': xuchang,
'411100': luohe,
'411200': sanmenxia,
'411300': nanyang,
'411400': shanqiu,
'411500': xinyang,
'411600': zhoukou,
'411700': zhumadian,
'419001': jiyuan
},
cityInfo: new Map()
}
},
mounted() {
this.initMapSelect()
},
methods: {
//初始化地图选择
async initMapSelect() {
this.itemMap = '410000'
this.initMapData()
},
initMapData(){
//初始化 cityCode和cityName的映射关系
this.jsonMap[this.itemMap].features.forEach(obj =>{
Vue.set(this.cityInfo, obj.properties.name,obj.properties.adcode)
})
this.chinaConfigure()
},
chinaConfigure() {
let myChart = echarts.init(document.getElementById("mapContainer")); //这里是为了获得容器所在位置
// window.onresize = myChart.resize;
echarts.registerMap(this.itemMap,this.jsonMap[this.itemMap])
let option = {
tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
show: false,
min: 0,
max: 1000,
text: ['High', 'Low'],
realtime: true,
calculable: true,
},
geo: { // 这个是重点配置区
map: this.itemMap, // 根据名字显示中国地图，省或市地图，
roam: false,
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: '#eee'
}
}
},
itemStyle: {
normal: {
areaColor: "rgb(36, 88, 76)",
borderColor: '#eee'
},
emphasis: {
areaColor: '#8dd7fc',
}
},
}
}
myChart.setOption(option,true)
window.onresize = myChart.resize;
myChart.on('click', this.echartsMapClick);
},
//点击下钻
echartsMapClick(params) {
//县市层级不可下钻 济源市特殊判断
if (this.cityInfo[params.name]+'' !== '419001' && this.cityInfo[params.name]+'' !== '济源市'){
if((!(this.cityInfo[params.name]+'').endsWith("00")) || (params.name+'').endsWith("县") || (params.name+'').endsWith("区")){
return ;
}
}
if(this.cityInfo[params.name] == '济源市' || this.itemMap == '419001'){
return;
}
let routeUrl = this.$router.resolve({
path: "你的跳转路径" + this.cityInfo[params.name]
});
window.open(routeUrl.href, '_blank');
}
}
};
|